<template>
	<view style="padding: 10px;">
		<u-form :model="formData" ref="uForm">
			<u-form-item label="调解时间"  :border-bottom="false" label-width="170" >
				<u-input  v-model="formData.tjsj" @click="show=!show" disabled="true" border="true"  />
			</u-form-item>
			<u-form-item label="调解地点"  :border-bottom="false"  label-width="170" prop="tjdd">
				<u-input v-model="formData.tjdd" border="true" :disabled="disabled" />
			</u-form-item>
			<u-form-item label="双方当事人"  :border-bottom="false"  label-width="170" >
				<u-icon v-if="!disabled" name="minus-circle" color="#fa3534" size="40" label="删除" @click="del"></u-icon>
				<u-icon v-if="!disabled" name="plus-circle" color="#2979ff" size="40" label="新增" @click="add"></u-icon>
			</u-form-item>
			<z-table :tableData='formData.list' :columns='columns' stickSide :showLoading="false"  :tableHeight='300' :showSelect="!disabled" @onClick='rowClick' @onSelect='tableSelect' ></z-table>
			<u-form-item label="简要纠纷经过"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.jfjg" border="true" type="textarea"  :disabled="disabled" />
			</u-form-item>
			<u-form-item label="调处结果"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.tcjg" border="true"  type="textarea" :disabled="disabled"/>
			</u-form-item>
			<!-- <u-form-item label="调解人"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.tjr" border="true" />
			</u-form-item> -->
			<u-form-item label="备注"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.bz" border="true" type="textarea" :disabled="disabled"/>
			</u-form-item>
			<u-button v-if="!disabled" @click="save(1,false)" :disabled="submitBtn"  type="primary" >保存</u-button>
			<view class="buttons" v-if="hasChecked">
				<u-button  @click="checked()" :disabled="submitBtn" type="primary">审核通过</u-button>
				<u-button  @click="unChecked()" :disabled="submitBtn" type="success">审核不通过</u-button>
			</view>
		</u-form>
		<u-modal show-cancel-button="true"  @confirm="confirm" v-model="unCheckedModalShow" :title="content" >
			<view style="padding: 10px;">
				<u-input v-model="formData.unCheckedReason" border="true"  :auto-height="true" />
			</view>
		</u-modal>
		
		<u-calendar v-if="!disabled" v-model="show" :mode="mode" @change="changeDate"></u-calendar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import zTable from "@/components/z-table/z-table.vue";
	import { mapState} from 'vuex';
	export default {
		components:{zTable},
		computed:mapState(['user', ]),
		data(){
			return{
				show:false,
				submitBtn:false,
				columns:[{
					title:'姓名',
					key: "xm",
					width: 200
				},{
					title: '性别',
					key: "xb",
					width: 150
				},{
					title: '身份证号',
					key: "sfzh",
					width: 300,
					formatNum: false
				},{
					title: '联系电话',
					key: "lxdh",
					width: 200,
					formatNum: false
				}],
				customStyle:{
					borderBottom:'1px solid #ccc'
				},
				mode:'date',
				selectList:[],
				disabled:false,
				hasChecked:false,
				unCheckedModalShow:false,
				content:'请输入原因',
				formData:{
					id:'',
					tjsj:this.$util.getNowD(),
					tjdd:'',
					list:[],
					jfjg:'',
					tcjg:'',
					tjr:'',
					bz:'',
					state:'1',
					unCheckedReason:'',
					delIds:[]
				},
				rules: {
					tjdd: [
						{ 
							required: true, 
							message: '调解地点不能为空',  
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		methods:{
			doSave(){
				this.submitBtn = true;
				const that = this;
				this.$http.post("/xxcj/mdjftj/save",this.formData).then(res=>{
					let data = res.data.data;
					if(data){
						that.$refs.uToast.show({
							title: '保存成功',
							type: 'success',
							callback: ()=>{
								let pages = getCurrentPages(); // 当前页面
								let prePage = pages[pages.length - 2]; // 前一个页面
								uni.navigateBack({
								     success: function() {
										prePage.onLoad(); // 执行前一个页面的onLoad方法
								     }
								});
							}
						})
					}else{
						this.submitBtn = false;
						this.$refs.uToast.show({
							title: '保存异常,请稍后重试',
							type: 'error'
						})
					}
				}).catch(e=>{
					this.submitBtn = false;
					this.$refs.uToast.show({
						title: '保存异常,请稍后重试',
						type: 'error'
					})
				})
			},
			changeDate(e){
				this.formData.tjsj  = e.result;
			},
			save(state,isCheck){
				const that = this;
				if(state)
					this.formData.state = state;
				if(isCheck){
					this.doSave();
				}else{
					this.formData.tjr = this.user.user.id;
					this.$refs.uForm.validate(valid => {
						if (valid) {
							that.doSave();
						} else {
							this.submitBtn = false;
							console.log('表单信息不完整');
						}
					});
				}
			},
			del() {
				//页面删除，只有在最后保存时会永久删除
				let that = this;
				that.formData.delIds = [];
				if(this.selectList.length){
					uni.showModal({
						content:'选中内容保存后将被永久删除,是否继续？',
						success: (res)=>{
							if(res.confirm){
								for(let i of that.selectList){
									let delItem = that.formData.list[i];
									if(delItem&&delItem.id){
										that.formData.delIds.push(delItem.id);
									}
									that.formData.list.splice(i,1);
								}
								
							}
						}
					})
					
				}else{
					console.log("没有选择要删除的");
				}
				/* if(this.selectList.length){
					for(let i of this.selectList){
						this.tableList.splice(i,1);
					}
				}else{
					console.log("没有选择要删除的");
				} */
					
			},
			add() {
				this.$u.route('pages/views/xxcj/mdjftj/mdjftj_dsr_add');
			},
			rowClick(val){
				console.log(val);
			},
			tableSelect(val){
				console.log(val);
				this.selectList = val;
			},
			// 转换当事人数据
			parseDsrList(){
				this.formData.list.forEach(item=>{item.xb==='男'?item.xb = 1:item.xb=0;});
			},
			confirm(){
				this.$u.route({
					type: 'back',
					delta: 1
				})
			},
			checkHasPermission(){
				if(this.formData.id){
					//没有修改权限，或者已审核通过，或者当点内容非本用户，设置内容为禁用状态
					if(this.user.user.auths.indexOf('edit')<0||this.formData.state==='2'|| this.formData.tjr != this.user.user.id){
						this.disabled = true;
					}
					//有审核权限，并且未审核状态，并且非本用户内容
					if(this.user.user.auths.indexOf('check')>-1&&this.formData.state==='1'&&this.formData.tjr != this.user.user.id){
						this.hasChecked = true;
					}
				}
			},
			//审核通过
			checked(){
				this.save(2,true);
			},
			//审核不通过
			unChecked(){
				this.unCheckedModalShow = true;
			},
			confirm(){
				this.save(3,true);
			}
		},
		onLoad(options){
			Object.assign(this.formData,options.item?JSON.parse(options.item):{});
			this.checkHasPermission();
			this.$refs.uForm.setRules(this.rules);
			uni.$on('addDsr',(data) => {
				this.formData.list.push(data)
			})
		}
	}
</script>

<style scoped>
	.buttons{
		display: flex;
		width: 100%;
		margin-top: 20upx;
		justify-content: center;
	}
	.buttons u-button{
		margin: 0 50rpx;
	}
</style>
